<template>
  <div>
    <div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="http://pavo.elongstatic.com/trip600noh320k/000aDRBM.jpg"/></div>
		        <div class="swiper-slide"><img src="http://gl.yatai.com/zby/zbgsf/jl/hd1_16860/201704/W020170427409016065290.jpg"/></div>
		        <div class="swiper-slide"><img src="http://pavo.elongstatic.com/trip600noh320k/0006vQJ5.jpg"/></div>
		    </div>
		</div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  data () {
   return {}
  },
  mounted(){
    this.$nextTick(() =>{
      this._initSwiper()
    }) 
  },
  methods:{
    _initSwiper(){
      //   var swiper = new Swiper ('.swiper-container', {
      //   loop: true,//自动轮播
      //   speed: 1300,//切换时间
      //   autoplay:{
      //     delay:3000,//轮播延时
      //   },
      //   // slidesPerView: "auto",//设置slider容器能够同时显示的slides数量(carousel模式)。auto为居中显示一个
      //   // centeredSlides:true,//若为true，那么活动块会居中，而非默认状态下的居左...false
      //   spaceBetween: 30,//设置每个slide之间的距离（单位px）。...
      // })
      // //鼠标覆盖停止自动切换
      // swiper.el.onmouseover = function() {
      // 	swiper.autoplay.stop();
      // }
      
      // //鼠标离开始自动切换
      // swiper.el.onmouseout = function() {
      // 	swiper.autoplay.start();
      // }

      //第二种
      new Swiper ('.swiper-container', {
          direction: 'horizontal',
          loop:1,
          autoplay: 5000,
          slidesPerView: "auto",
          centeredSlides:true,
          spaceBetween: 20,
          // 如果需要分页器
          // pagination: '.swiper-pagination',
        })
    }
  },
}
</script>
<style lang='less' scoped>
// .swiper-container {
//   margin-top: 20px;
//   width: 1000px;
//   height: 320px;
//   margin-bottom: 53px;
//   /* overflow: visible!important; */
// }
// //控制居中位置
// .swiper-container .swiper-wrapper .swiper-slide{ width: 630px; }
// .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 10px;}
// //控制上一个元素的样式
// .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
// .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
// //控制下一个元素的样式
// .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
// .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}
// //控制右边间距
// .swiper-container .swiper-wrapper .swiper-slide-active{height: 300px;}
// .swiper-container .swiper-wrapper .swiper-slide-active img{ height: 284px!important;}

.swiper-container {
    margin-top: 20px;
    width: 900px;
    height: 320px;
    margin-bottom: 53px;
    /* overflow: visible!important; */
}
//width:900px;和width:350px;等比例缩放4
.swiper-container .swiper-wrapper .swiper-slide{ width: 350px; }
.swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 10px;}
.swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}

</style>